<!-- 添加收件人组件 -->
<template>
	<div style="width: 100%; padding: 30rpx;box-sizing: border-box;">
		<!-- <van-nav-bar
          title="添加收件人"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        /> -->
		<!-- style="height: 100%;overflow: auto;box-sizing: border-box;" -->
		<uni-forms ref="form" :modelValue="fieldListParams" label-width="100px">
			<div class="client">
				<!-- right-icon="edit" -->
				<uni-forms-item :rules="$rules.handle.Addressee" required name="Addressee" label="收件人：">
					<uni-easyinput v-model="fieldListParams.Addressee" placeholder="请输入收件人" />
				</uni-forms-item>
				<uni-forms-item :rules="$rules.handle.TelNumber" required name="TelNumber" label="联系电话：">
					<uni-easyinput v-model="fieldListParams.TelNumber" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item :rules="$rules.handle.Address" required name="Address" label="收件地址">
					<uni-easyinput v-model="fieldListParams.Address" placeholder="请输入收件地址" />
				</uni-forms-item>
				<uni-forms-item name="Remark" label="备注">
					<uni-easyinput v-model="fieldListParams.Remark" placeholder="请输入备注" />
				</uni-forms-item>
			</div>
			<div class="submitButton">
				<u-button type="primary" @click="onSubmit" :loading="loading">保存收件人</u-button>
			</div>
		</uni-forms>
	</div>
</template>

<script>
	import {
		Cust_AddressBookSaveData
	} from '@/api/interface.js'
	export default {
		components: {},
		data() {
			return {
				loading: false,
				customStyle: {
					border: "2px solid blue"
				},
				// 是否显示弹窗
				show: false,
				// 添加收件人绑定数据
				fieldListParams: {
					// 收件人
					Addressee: "",
					// 联系电话
					TelNumber: "",
					// 收件地址
					Address: "",
					// 是否是默认地址
					IsDefault: 1,
					// 备注
					Remark: "",
					// 客户id
					CustomerId: ""
				}
			};
		},
		onLoad(options) {
			this.fieldListParams.CustomerId = options.CustomerId
		},
		methods: {
			//返回
			onClickLeft() {
				this.show = false;
			},
			clear() {
				this.queryParam = [];
				this.getDataList();
			},
			// 保存收件人信息
			onSubmit() {
				var that = this

				this.$refs.form.validate().then(res => {
					this.loading = true
					uni.showLoading({
						title: '加载中'
					})
					Cust_AddressBookSaveData(
							this.fieldListParams
						)
						.then(resJson => {
							console.log(resJson);
							if (resJson.Success) {
								setTimeout(function() {
									// 返回样品列表页面
									uni.navigateBack()
									uni.hideLoading()
									this.loading = false
									that.$sucessToast("已添加");
								}, 1500)
							} else {
								this.$errorToast(resJson.Msg);
								this.loading = false
							}
						});
				}).catch(err => {
					console.log('保存收件人', this.fieldListParams)
					console.log(err);
				})

			},
		}
	};
</script>

<style scoped>
	/* 覆盖van-button的默认样式 */
	.van-button {
		height: 35px !important;
		border-radius: 5px;
	}

	/* 适配底部导航栏 */
	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 65px;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(58px + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(58px + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10px;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}

	.ckbxcli {
		border: 1px solid Gainsboro;
		/* width: 250px; */
		height: 150px;
		text-align: center;
		margin-left: 15px;
		margin-top: 15px;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 2px;
		cursor: pointer;
		padding-top: 6px;
		list-style-type: none;
		display: inline-block;
	}

	ul {
		margin-top: 20px;
	}

	.nav {
		position: fixed !important;
		width: 100%;
	}
</style>